Carl

glad you were able to implement my suggestion. try changing the duration of the first tween to a very small number like duration:0.001 https://codepen.io/snorkltv/pen/MWdXPKN?editors=0010 having a set or 0-duration tween as the first thing in a timeline can be kind of funky

Thanks for the demo. If you don't want your animations to have any animation you can set duration:0 or use a set() Once your animations don't have any duration it is important to space them apart in the timeline by using a position parameter. I'm using index * 0.5 in your loop. Without the position parameter they will all run at the same time. https://codepen.io/snorkltv/pen/JjqZvOj?editors=0110 Hopefully this helps

Yes, unfortunately I don't understand your code very well either and the best I can do is provide you an example of how I think it is best to set it up. My demo provides the bare-minimum of code for this type of effect and it's also fully responsive. I think it would be best for you to fork my demo and add your cards in place of my <h2> tags. I apologize, but I just don't have the time at the moment to try to re-work your project for you.

like this https://codepen.io/snorkltv/pen/xxNzwKY?editors=0010

Hi, Perhaps you can just add a blank card that is same width as the viewport.

Hi Glad to hear you are interested in learning more about GSAP and you're trying things like this. Here is a basic demo from my course ScrollTrigger Express that perhaps may help. https://codepen.io/snorkltv/pen/PoxojaO?editors=0010 Open it in a new window and resize to see that it is fully responsive and that the pinning stops whenever "japan" is visible in the viewport. Also notice that each country name (card) is a different width and it adjusts flawlessly to resize. The course contains loads of videos to help you through these types of common scrolltrigger tasks and many more advanced setups. Hopefully this demo will give you some ideas how to incorporate the code into your project. Carl

I might not be following what you mean about the trigger points. But to handle each section fading in its background when it enters the viewport I think this works pretty well just using onEnter and onLeave https://codepen.io/snorkltv/pen/Jjqpmae?editors=0010

it appears that the scale is set relative to the native size of the images not the width and height that you set in pixi. I haven't used pixi in years so I'm just going off what I see. When loading the images the first image is loaded at 300 x 300 but the rest are 150 by 150 and and it seems to work. If you want to stagger different properties at different rates you need a tween for each property. in the demo below I created a timeline. https://codepen.io/snorkltv/pen/qBGVyYR?editors=0010 Hope this helps. if you're not familiar with timelines I'd strongly recommend my free beginner's course available via the link in my signature.

perhaps an "easier" approach would be to push each sprite into an array and then after the loop runs you can tween every image in that array using a stagger https://codepen.io/snorkltv/pen/xxNPjPY?editors=0010

Thanks for the demo. very cool. The reason your images were animating all at once is because you are creating new tweens at virtually the same during each iteration of the loop. what I did was create a timeline outside the loop and then each images tween gets added to the timeline at a position of (imgNum * 1) https://codepen.io/snorkltv/pen/vYwWjev?editors=1010 EDIT: at one point I had the wrong pen here

Thanks for the demo, it was very helpful. Yes, the tween does reverse to a smaller value but it is also starting at that same value. Set the duration of the tween to 10 and you will see that as soon as you mouseenter the borders will jump to small state and then grow. I believe the main cause for the discrepancy is that your --the-size property is initially set in px but you are tweening to percent. Notice how using % for both yields consistent results https://codepen.io/snorkltv/pen/KKLXZYX?editors=0110 Since the same percent is used for the width and height the starting state will not look the same as in your example. You may need to animate width and height with different values.

Hi, you can specify an endTrigger https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#endTrigger here is a quick example: https://codepen.io/snorkltv/pen/jOoLqNx?editors=0110 if you need something different please provide a minimal demo

Glad to hear @mvaneijgen's solution worked for you. There's absolutely nothing wrong with it. Here is an alternate solution that isn't any better or worse but it's what I usually reach for. I was already working on it so figured I'd post anyway. The basic idea is that you create a function that creates a tween that contains an onComplete that calls the function again at a random interval https://codepen.io/snorkltv/pen/xxNLbwa?editors=0010 Going one step further you could tell the function which element to drop and now you have multiple elements following the same procedure https://codepen.io/snorkltv/pen/KKLvwMq?editors=1010

wow. there's some great info and demos in here!

Thanks for the image. That's a great way to try to keep track of the points. Sorry, for any confusion, but in my haste I actually had the "bar3" values duplicated in my clipPath code which is why you were seeing extra points. Thanks for catching that. I removed the extra row of values. As for the from values, you can use those point objects for each bar to come up with a totally custom starting position using a set(). In the demo below I removed the animation to hopefully make it easier to understand how each bar now has a custom y starting value https://codepen.io/snorkltv/pen/qBwMPMw For what it's worth, keeping track of all those points in the clipPath string is pretty tricky for me too, so don't feel bad if it feels like a lot ot take in. As for using svg, the post @mvaneijgen linked to is quite comprehenisve. However, below is a demo from one of my svg lessons if it helps https://codepen.io/snorkltv/pen/rNKVrYx there are now 10 clipping and masking video lessons in SVG Animation with GreenSock if you want to dive deeper.